import { useSettingsStore } from "@/stores/setting"
import { generateColors, setColors } from "@/utils/color"

export const useGenerateTheme = () => {
  // 获得settingsStore
  const store = useSettingsStore()
  const theme = computed(() => store.settings.theme) // 默认主题
  const originalTheme = computed(() => store.settings.originalTheme) // 原始主题

  // 生成主题
  const generateTheme = (primary: string) => {
    const colors = {
      primary,
      ...generateColors(primary)
    }
    setColors(colors)
  }

  watchEffect(() => {
    if (theme.value !== originalTheme.value) {
      generateTheme(theme.value)
      // 同步最新主题
      store.changeSetting({ key: "originalTheme", value: theme.value })
    }
  })

  return { generateTheme }
}
